<template>
  <a-modal v-model:open="formVisible" :title="formData.id ? '编辑库存账期' : '添加库存账期'" width="900" :footer="null" destroy-on-close @cancel="hideForm">
    <div class="inventory-period-form-container">
      <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical" class="inventory-period-form">
        <a-row :gutter="[16, 16]">
          <!-- 账期 -->
          <a-col :span="6">
            <a-form-item name="accountPeriod" label="账期" class="form-bottom-line">
              <a-date-picker v-model:value="formData.accountPeriod" placeholder="请选择账期" format="YYYY-MM-DD" picker="date" />
            </a-form-item>
          </a-col>

          <!-- 区域 -->
          <a-col :span="6">
            <a-form-item name="area" label="区域" class="form-bottom-line">
              <a-input v-model:value="formData.area" placeholder="请输入区域" />
            </a-form-item>
          </a-col>

          <!-- 码 -->
          <a-col :span="6">
            <a-form-item name="code" label="码" class="form-bottom-line">
              <a-input v-model:value="formData.code" placeholder="请输入码" />
            </a-form-item>
          </a-col>

          <!-- 品名 -->
          <a-col :span="6">
            <a-form-item name="productName" label="品名" class="form-bottom-line">
              <a-input v-model:value="formData.productName" placeholder="请输入品名" />
            </a-form-item>
          </a-col>

          <!-- 规格型号 -->
          <a-col :span="6">
            <a-form-item name="specification" label="规格型号" class="form-bottom-line">
              <a-input v-model:value="formData.specification" placeholder="请输入规格型号" />
            </a-form-item>
          </a-col>

          <!-- 计量 -->
          <a-col :span="6">
            <a-form-item name="unit" label="计量" class="form-bottom-line">
              <a-input v-model:value="formData.unit" placeholder="请输入计量" />
            </a-form-item>
          </a-col>

          <!-- 期初量 -->
          <a-col :span="6">
            <a-form-item name="beginningQuantity" label="期初量" class="form-bottom-line">
              <a-input-number v-model:value="formData.beginningQuantity" placeholder="请输入期初量" :precision="4" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 期初成本 -->
          <a-col :span="6">
            <a-form-item name="beginningCost" label="期初成本" class="form-bottom-line">
              <a-input-number v-model:value="formData.beginningCost" placeholder="请输入期初成本" :precision="2" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 入库量 -->
          <a-col :span="6">
            <a-form-item name="inQuantity" label="入库量" class="form-bottom-line">
              <a-input-number v-model:value="formData.inQuantity" placeholder="请输入入库量" :precision="4" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 入库成本 -->
          <a-col :span="6">
            <a-form-item name="inCost" label="入库成本" class="form-bottom-line">
              <a-input-number v-model:value="formData.inCost" placeholder="请输入入库成本" :precision="2" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 出库量 -->
          <a-col :span="6">
            <a-form-item name="outQuantity" label="出库量" class="form-bottom-line">
              <a-input-number v-model:value="formData.outQuantity" placeholder="请输入出库量" :precision="4" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 出库成本 -->
          <a-col :span="6">
            <a-form-item name="outCost" label="出库成本" class="form-bottom-line">
              <a-input-number v-model:value="formData.outCost" placeholder="请输入出库成本" :precision="2" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 期末量 -->
          <a-col :span="6">
            <a-form-item name="endingQuantity" label="期末量" class="form-bottom-line">
              <a-input-number v-model:value="formData.endingQuantity" placeholder="请输入期末量" :precision="4" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 期末成本 -->
          <a-col :span="6">
            <a-form-item name="endingCost" label="期末成本" class="form-bottom-line">
              <a-input-number v-model:value="formData.endingCost" placeholder="请输入期末成本" :precision="2" style="width: 100%" />
            </a-form-item>
          </a-col>

          <!-- 单价 -->
          <a-col :span="6">
            <a-form-item name="unitPrice" label="单价" class="form-bottom-line">
              <a-input-number v-model:value="formData.unitPrice" placeholder="请输入单价" :precision="2" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>

        <div class="form-footer">
          <a-button type="primary" @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 10px" @click="hideForm">取消</a-button>
        </div>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import { formModel } from './data'

defineOptions({ name: 'InventoryPeriodForm' })

const emit = defineEmits(['success'])

const formRef = ref(null)
const formVisible = ref(false) // 弹框显示
const formData = reactive({}) // 表单数据

// 验证规则
const rules = {
  accountPeriod: [{ required: true, message: '请选择账期', trigger: 'change' }],
  area: [{ required: true, message: '请输入区域', trigger: 'blur' }],
  code: [{ required: true, message: '请输入码', trigger: 'blur' }],
  productName: [{ required: true, message: '请输入品名', trigger: 'blur' }],
  specification: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
  unit: [{ required: true, message: '请输入计量', trigger: 'blur' }],
}

/**
 * 取消
 */
function hideForm() {
  formVisible.value = false
  Object.assign(formData, {})
}

// 提交表单
async function handleSubmit() {
  await formRef.value.validate()
  // 转换日期格式
  if (formData.accountPeriod) {
    formData.accountPeriod = formData.accountPeriod.format('YYYY-MM-DD')
  }
  
  await httpRequest(`/admin/inventoryPeriod/${formData.id ? 'update' : 'add'}`, formData)
  message.success('保存成功')
  emit('success')
  formVisible.value = false
}

/**
 * 编辑
 * @param record
 */
function edit(record) {
  if (record) {
    const dateKeys = ['accountPeriod']
    for (const key in formModel) {
      if (dateKeys.includes(key)) {
        formData[key] = record[key] ? dayjs(record[key]) : null
      } else {
        formData[key] = record[key]
      }
    }
  } else {
    Object.assign(formData, { ...formModel })
  }
  formVisible.value = true
}

// 暴露方法供父组件使用
defineExpose({ edit })
</script>

<style lang="less" scoped>
@import '@/assets/style/resetForm.less';

.inventory-period-form-container {
  width: 100%;
}

.inventory-period-form {
  margin-top: 20px;
}

.form-footer {
  margin-top: 30px;
  text-align: right;
}
</style>